<div class="kt-portlet">
    <form class="kt-form kt-form--label-align-right">
        <div class="kt-portlet__head">
            <div class="kt-portlet__head-label">
                <span class="kt-portlet__head-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" class="kt-svg-icon">
                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <rect id="bound" x="0" y="0" width="24" height="24"></rect>
                            <circle id="Oval-5" fill="#000000" opacity="0.3" cx="12" cy="12" r="10"></circle>
                            <path d="M14.5,11 C15.0522847,11 15.5,11.4477153 15.5,12 L15.5,15 C15.5,15.5522847 15.0522847,16 14.5,16 L9.5,16 C8.94771525,16 8.5,15.5522847 8.5,15 L8.5,12 C8.5,11.4477153 8.94771525,11 9.5,11 L9.5,10.5 C9.5,9.11928813 10.6192881,8 12,8 C13.3807119,8 14.5,9.11928813 14.5,10.5 L14.5,11 Z M12,9 C11.1715729,9 10.5,9.67157288 10.5,10.5 L10.5,11 L13.5,11 L13.5,10.5 C13.5,9.67157288 12.8284271,9 12,9 Z" id="Combined-Shape" fill="#000000"></path>
                        </g>
                    </svg>
                </span>
                <h3 class="kt-portlet__head-title">
                    安全设置
                </h3>
            </div>
        </div>
        <div class="kt-portlet__body">
            <ul class="security-setting">
                <li>
                    <div class="kt-stack kt-stack--ver kt-stack--general">
                        <div class="kt-stack__item kt-stack__item--center kt-stack__item--middle icon">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" class="kt-svg-icon">
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <rect id="bound" x="0" y="0" width="24" height="24"/>
                                    <path d="M6,2 L18,2 C18.5522847,2 19,2.44771525 19,3 L19,12 C19,12.5522847 18.5522847,13 18,13 L6,13 C5.44771525,13 5,12.5522847 5,12 L5,3 C5,2.44771525 5.44771525,2 6,2 Z M7.5,5 C7.22385763,5 7,5.22385763 7,5.5 C7,5.77614237 7.22385763,6 7.5,6 L13.5,6 C13.7761424,6 14,5.77614237 14,5.5 C14,5.22385763 13.7761424,5 13.5,5 L7.5,5 Z M7.5,7 C7.22385763,7 7,7.22385763 7,7.5 C7,7.77614237 7.22385763,8 7.5,8 L10.5,8 C10.7761424,8 11,7.77614237 11,7.5 C11,7.22385763 10.7761424,7 10.5,7 L7.5,7 Z" id="Combined-Shape" fill="#000000" opacity="0.3"/>
                                    <path d="M3.79274528,6.57253826 L12,12.5 L20.2072547,6.57253826 C20.4311176,6.4108595 20.7436609,6.46126971 20.9053396,6.68513259 C20.9668779,6.77033951 21,6.87277228 21,6.97787787 L21,17 C21,18.1045695 20.1045695,19 19,19 L5,19 C3.8954305,19 3,18.1045695 3,17 L3,6.97787787 C3,6.70173549 3.22385763,6.47787787 3.5,6.47787787 C3.60510559,6.47787787 3.70753836,6.51099993 3.79274528,6.57253826 Z" id="Combined-Shape" fill="#000000"/>
                                </g>
                            </svg>
                        </div>
                        <div class="kt-stack__item kt-stack__item--middle kt-stack__item--fluid describe">
                            @if(strUtil.isNotBlank(user.email)){
                            <h4 class="text-success">
                                ${user.email}
                                @if(!user.mailIsVerifies){
                                <span class="kt-badge kt-badge--warning kt-badge--inline">待验证</span>
                                @}
                                <a class="btn btn-sm btn-link change-mail" href="javascript:">更改</a>
                            </h4>
                            @}else{
                            <h4 class="text-warning">未绑定 <a class="btn btn-sm btn-link change-mail" href="javascript:">绑定</a></h4>
                            @}
                            <p>密保邮箱可以进行帐号登录、找回密码等敏感操作的安全验证，请勿泄露邮箱信息，轻信他人邮件，以防不法分子利用造成个人损失</p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="kt-stack kt-stack--ver kt-stack--general">
                        <div class="kt-stack__item kt-stack__item--center kt-stack__item--middle icon">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" class="kt-svg-icon">
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <rect id="bound" x="0" y="0" width="24" height="24"/>
                                    <path d="M8,2.5 C7.30964406,2.5 6.75,3.05964406 6.75,3.75 L6.75,20.25 C6.75,20.9403559 7.30964406,21.5 8,21.5 L16,21.5 C16.6903559,21.5 17.25,20.9403559 17.25,20.25 L17.25,3.75 C17.25,3.05964406 16.6903559,2.5 16,2.5 L8,2.5 Z" id="Combined-Shape" fill="#000000" opacity="0.3"/>
                                    <path d="M8,2.5 C7.30964406,2.5 6.75,3.05964406 6.75,3.75 L6.75,20.25 C6.75,20.9403559 7.30964406,21.5 8,21.5 L16,21.5 C16.6903559,21.5 17.25,20.9403559 17.25,20.25 L17.25,3.75 C17.25,3.05964406 16.6903559,2.5 16,2.5 L8,2.5 Z M8,1 L16,1 C17.5187831,1 18.75,2.23121694 18.75,3.75 L18.75,20.25 C18.75,21.7687831 17.5187831,23 16,23 L8,23 C6.48121694,23 5.25,21.7687831 5.25,20.25 L5.25,3.75 C5.25,2.23121694 6.48121694,1 8,1 Z M9.5,1.75 L14.5,1.75 C14.7761424,1.75 15,1.97385763 15,2.25 L15,3.25 C15,3.52614237 14.7761424,3.75 14.5,3.75 L9.5,3.75 C9.22385763,3.75 9,3.52614237 9,3.25 L9,2.25 C9,1.97385763 9.22385763,1.75 9.5,1.75 Z" id="Combined-Shape" fill="#000000" fill-rule="nonzero"/>
                                </g>
                            </svg>
                        </div>
                        <div class="kt-stack__item kt-stack__item--middle kt-stack__item--fluid describe">
                            @if(strUtil.isNotBlank(user.phone)){
                            <h4 class="text-success">${user.phone} <button type="button" disabled class="btn btn-sm btn-link change-phone">更改(开发中...)</button></h4>
                            @}else{
                            <h4 class="text-warning">未绑定 <button type="button" disabled class="btn btn-sm btn-link change-phone">绑定(开发中...)</button></h4>
                            @}
                            <p>密保手机可以进行帐号登录、找回密码等敏感操作的安全验证，请勿随意泄露手机号、短信验证码，以防不法分子利用造成个人损失</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="kt-portlet__foot">
            <div class="kt-form__actions text-center">
                <#btn btnType="success" name="保存" icon="la la-save" click="mPersonalCenter.saveUserSecuritySetting(this)"/>
            </div>
        </div>
    </form>
</div>